<template>
	<view class="container">
		<view class="serach-wrap">
			<view class="search_box">
				<view class="search_img">
					<image
						src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/9616de5fd2f72e4c639ee1295f861eb564f7e690.png"
						mode=""></image>
				</view>
				<view class="input" @tap="doSearch">
					请输入你想搜索的商品
				</view>
				<view class="search-btn">搜索</view>
			</view>
		</view>

		<view class="wrap">
			<!-- 轮播图 -->
			<view class="swiper-wrap">
				<swiper class="swiper-con" autoplay="true" indicator-dots='true' indicator-color='#EC1818'
					indicator-active-color='#fff'>
					<swiper-item v-for="(item,index) in swiperList" :key="index" @tap="toDetail(item)">
						<view class="img">
							<base-img :src='item.image'></base-img>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 我的订单和海报 -->
			<view class="boxs">
				<view class="my_box" @tap="jumpOrder()">
					<view class="my_box_text">
						<text>我的订单</text>
						<text class="all">查看全部</text>
					</view>
					<view class="my_box_img">
						<image src="/static/order.png" mode=""></image>
					</view>
				</view>
				<view class="poster" @tap="jumpShareshop()">
					<view class="poster_box_text">
						<text>我的海报</text>
						<text class="intertive">邀请好友享收益</text>
					</view>
					<view class="poster_box_img">
						<image src="/static/code.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 视频 -->
			<view class="adv-wrap" v-if='video_url'>
				<video :src="video_url" ref="myVideo" :poster="poster" controls="true"></video>
			</view>
			<!-- 全部商品 -->
			<view class="goods-wrap">
				<view class="title">
					<text>好物推荐</text>
				</view>
				<view class="goods-con">
					<view class="goods-item-con" v-for='(item,index) in goodsList' @tap='jumpGoodsDetail(item.g_id)'>
						<goods-item :goodsType='1' :item='item' @handleGoods='handleGoods(item)'></goods-item>
					</view>
				</view>
				<view class="loding-con">
					<view class="loding-end line_center" v-if='loadEnd'>
						<view>-</view>
						<view class="end-t">已经到底啦</view>
						<view>-</view>
					</view>
					<view class="loding line_center" v-else>
						正在加载中~~
					</view>
				</view>
			</view>
		</view>
		<!-- 商品购买弹窗 -->
		<modal :showModal='showGoodsModal'>
			<buy-modal :showBuyModal='showGoodsModal' :goodsDetail='goodsDetail' @close='close'></buy-modal>
		</modal>
		<!-- 底部登录条 -->
		<view class="login-strip-wrap" v-if='showLoginTrip'>
			<view class="login-strip-logo">
				<image src='/static/logo.png'></image>
				<view class="text">登录尊享更多权益</view>
			</view>
			<view class="login-btn line_center" @tap='tologin'>登录</view>
		</view>
	</view>
</template>

<script>
	import wxLogin from '@/components/wx-login/wx-login.vue';
	import goodsItem from '@/components/goods-item/goods-item.vue';
	import baseImg from '@/components/base-img/base-img.vue';
	import modal from '@/components/modal/modal.vue';
	import poster from '@/components/poster/poster.vue';
	import buyModal from '@/components/buy-modal/buy-modal.vue';
	const app = getApp();
	export default {
		components: {
			goodsItem,
			baseImg,
			modal,
			poster,
			buyModal,
			wxLogin
		},
		data() {
			return {
				background: '#fff',
				hostUrl: app.globalData.hostUrl,
				bgSize: '100% 264rpx',
				showGoodsModal: false,
				showPosterModal: false,
				swiperList: [],
				cateList: [],
				goodsList: [],
				goodsDetail: {},
				page: 1,
				totalPage: '',
				loadEnd: false,
				video_url: '',
				keyword: '',
				poster: '',
				token: '',
				showLoginTrip: false,
				uid: ''
			}
		},
		onLoad(option) {
			if (option.scene) {
				var arr = []
				arr = decodeURIComponent(option.scene).replace(/_/ig, ",").split(',')
				console.log('arr', arr)
				getApp().globalData.parent_sn = arr[0]
			} else {
				console.log('分享链接进来 === 》', option)
				if (option.uid) app.globalData.parent_sn = option.uid
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : "";
			this.uid = uni.getStorageSync('UID') ? uni.getStorageSync('UID') : "";
			if (!this.token) {
				this.showLoginTrip = true;
			} else {
				this.showLoginTrip = false;
			}
			this.reload()
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				that.getGoods()
			} else {
				this.loadEnd = true;
				return;
			}
		},
		onPullDownRefresh() {
			this.reload();
		},
		onShareAppMessage(res) {
			let path, title, imageUrl;
			path = `/pages/tab-page/index/index?uid=${this.uid}`;
			title = '首页';
			imageUrl = '';
			return {
				path,
				title,
				imageUrl
			}
		},
		onShareTimeline() {
			return {
				title: '智诚智谷',
				query: `uid=${this.uid}`
			};
		},
		methods: {
			// 跳转优惠专区
			nav_youhui() {
				uni.navigateTo({
					url: '/pages/integral/index/index'
				})
			},
			doSearch: function() {
				uni.switchTab({
					url: '/pages/tab-page/integral/integral'
				})
			},
			toDetail(item) {
				if (!item.content) {
					return;
				}
				uni.navigateTo({
					url: `/pages/goods-page/swiper-detail/swiper-detail?id=${item.id}`
				})
			},
			/* 刷新方法 */
			reload() {
				this.swiperList = [];
				this.goodsList = [];
				// this.page = 1;
				// this.totalPage = '';
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.getSlideData();
				this.getGoods();
				uni.stopPullDownRefresh()
			},
			/* 获取轮播数据 */
			getSlideData() {
				let that = this;
				console.log('轮播代码')
				app.globalRequest({
					api: app.getApi().home.sliderList,
				}).then(res => {
					if (res.code == 1) {
						that.swiperList = res.data.lbList;
						that.video_url = res.data.video
					}
				}).catch(err => {

				})
			},
			/* 获取商品列表 */
			getGoods() {
				let that = this;
				app.globalRequest({
					api: app.getApi().home.goods
				}).then(res => {
					if (res.code == 1) {
						let goodsList = res.data;
						goodsList.forEach(v => {
							v.priceObj = app.splicePrice(v.price);
							v.num = 1;
						})
						that.goodsList = that.goodsList.concat(goodsList);
						// that.totalPage = res.data.last_page;
						console.log(that.goodsList)
					}
				}).catch(err => {

				})
			},
			/* 跳转商品详情 */
			jumpGoodsDetail(g_id) {
				uni.navigateTo({
					url: `/pages/goods-page/goods-detail/goods-detail?type=1&goods_id=${g_id}`,
				})
			},
			/* 跳转海报*/
			jumpShareshop() {
				let that = this;
				if (!this.token) {
					uni.showToast({
						title: '请授权登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/user/login/login_auth',
						})
					}, 1000)
					return;
				}
				uni.navigateTo({
					url: '/pages/user/invite-code/invite-code',
				})
			},
			/* 跳转订单*/
			jumpOrder() {
				let that = this;
				if (!this.token) {
					uni.showToast({
						title: '请授权登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/user/login/login_auth',
						})
					}, 1000)
					return;
				}
				uni.navigateTo({
					url: '/pages/user/my-order/my-order',
				})
			},
			tologin() {
				let that = this;
				if (!this.token) {
					uni.showToast({
						title: '请授权登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/user/login/login_auth',
						})
					}, 1000)
				}
			},
			/* 点击购物车 */
			handleGoods(item) {
				console.log('item', item)
				item.num = 1;
				this.goodsDetail = item;
				uni.$emit('goodDetail', this.goodsDetail)
				this.showGoodsModal = true;
			},
			getPoster() {
				this.showPosterModal = true;
			},
			close() {
				this.showGoodsModal = false;
				this.showPosterModal = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {}

	image {
		width: 100%;
		height: 100%;
	}

	.serach-wrap {
		width: 100%;
		height: 88rpx;
		background: #fff;
		position: fixed;
		left: 0;
		z-index: 222;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search_box {
		width: 686rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 2rpx solid #EC1818;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 4rpx 0 24rpx;
		box-sizing: border-box;

		.input {
			width: 100%;
			height: 100%;
			font-size: 28rpx;
			line-height: 70rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #D9D9D9;
		}

		.search_img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.search-btn {
			width: 132rpx;
			height: 60rpx;
			background: #E31717;
			border-radius: 36rpx;
			color: #fff;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}
	}

	.wrap {
		position: relative;
		z-index: 2;
		padding: 112rpx 32rpx;
	}

	.swiper-wrap {
		width: 100%;
		height: 312rpx;
		overflow: hidden;
		transform: translateY(0);
		border-radius: 24rpx;

		.swiper-con {
			width: 100%;
			height: 100%;
			border-radius: 24rpx;

			swiper-item {
				width: 100%;
				height: 100%;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.get-call {
		width: 100%;
		height: 100rpx;
		background: $dis-font-color;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #fff;
	}

	.cate-wrap {
		display: flex;
		margin-top: 24rpx;

		.cate-item {
			width: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 60rpx;

			&:nth-of-type(4n) {
				margin-right: 0;
			}

			.cate-img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 100%;
				overflow: hidden;
			}

			.cate-text {
				font-size: 26rpx;
				padding-top: 20rpx;
			}
		}
	}

	.adv-wrap {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
		overflow: hidden;
		margin-top: 24rpx;
		box-sizing: border-box;

		video {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}

	.boxs {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		background: #fff;
		border-radius: 16rpx;

		.my_box,
		.poster {
			width: 50%;
			border-right: 2rpx solid #EEEEEE;
			margin: 30rpx 0;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-radius: 8rpx 0 0 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.my_box_text,
			.poster_box_text {
				display: flex;
				flex-direction: column;

				text {
					color: #333333;
					font-size: 28rpx;
				}

				.all,
				.intertive {
					font-size: 20rpx;
					margin-top: 20rpx;
					color: #999999;
				}
			}

			.my_box_img,
			.poster_box_img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
		}

		.poster {
			border: 0;
			border-radius: 0 8rpx 8rpx 0;
		}
	}

	.goods-wrap {
		margin-top: 24rpx;
		padding: 0 0rpx 80rpx;
		box-sizing: border-box;
		background-color: #FBFBFB;

		.title {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 0 0;
			box-sizing: border-box;

			text {
				font-size: 32rpx;
				color: #333333;
			}

			.all {
				font-size: 24rpx;
			}
		}

		.goods-con {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.goods-item-con {
			margin-top: 24rpx;
		}
	}

	.loding-con {
		padding-top: 30rpx;
	}

	.loding,
	.loding-end {
		color: #707070;
	}

	.end-t {
		padding: 0 10rpx;
	}

	.youhui_box {
		width: 100%;
		height: 240rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: 24rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.login-strip-wrap {
		width: 100%;
		height: 88rpx;
		background: rgba(50, 50, 51, 0.7);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2222;
		padding: 0 24rpx;
		box-sizing: border-box;

		.login-strip-logo {
			display: flex;
			align-items: center;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			.text {
				color: #fff;
				margin-left: 20rpx;
			}
		}

		.login-btn {
			width: 204rpx;
			height: 76rpx;
			background: $dis-liner-color;
			border-radius: 38rpx;
			color: #fff;
		}
	}
</style>